<template>
    <section class="layout_container--parent">
        <div class="layout_wrap--item" @click="handleToSettings('base')">
            <div class="screen_content">
                <n-icon size="64" color="#4090EF">
                    <Cog />
                </n-icon>
            </div>
            <div class="text_content">基础配置</div>
        </div>
        <div class="layout_wrap--item" @click="handleToSettings('picture')">
            <div class="screen_content">
                <FrontViewComp />
            </div>
            <div class="text_content">前台画面</div>
        </div>
        <div class="layout_wrap--item" @click="handleToSettings('picture')">
            <div class="screen_content">
                <TransitionComp />
            </div>
            <div class="text_content">过渡画面</div>
        </div>
        <div class="layout_wrap--item" @click="handleToSettings('picture')">
            <div class="screen_content">
                <MapComp />
            </div>
            <div class="text_content">地图画面</div>
        </div>
        <div class="layout_wrap--item" @click="handleToSettings('picture')">
            <div class="screen_content">
                <ScoreBoard />
            </div>
            <div class="text_content">计分板</div>
        </div>
    </section>
</template>

<script setup lang='ts' name="Illuation">
import FrontViewComp from '@/views/settingPages/components/FrontViewComp.vue';
import ScoreBoard from '@/views/settingPages/components/ScoreBoardComp.vue';
import MapComp from './components/MapComp.vue';
import TransitionComp from './components/TransitionComp.vue';
import { Cog } from '@vicons/ionicons5';
const router = useRouter();
const handleToSettings = (type: string) => {
    if (type === 'base') {
        router.push({
            path: '/baseSetting'
        });
    } else {
        router.push({ path: '/layoutSetting' })
    }
}
</script>

<style scoped lang='scss'>
.layout_container--parent {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    @include useTheme {
        color: getVar('text');
    }

    cursor: pointer;

    .layout_wrap--item {
        width: 100%;

        @include useTheme {
            border-bottom: 1px solid getVar('layoutBcolor');
        }

        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        // 奇数项添加右边框
        &:nth-child(odd) {
            @include useTheme {
                border-right: 1px solid getVar('layoutBcolor');
            }
        }

        .screen_content {
            width: 100%;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .text_content {
            height: 36px;
            width: 100%;
            text-align: center;
            line-height: 36px;

            @include useTheme {
                border-top: 1px solid getVar('layoutBcolor');
            }
        }
    }
}
</style>